<template>
	<view class="">
		<view class="topnav">
			<view class="nav" v-for="(item,index) in navarr" :key="index" @click="navbtn(item,index)">
				<text :class="type==item.type ? 'specil':''">{{item.name}}</text>
			</view>
		</view>
		<view class="contant" v-for="(item,index) in arr" :key="index" @click="examination(item)">
			<view class="titlebox">
				<view class="titles">{{item.name}}</view>
				<view class="type" v-if="item.comments_count<=0">未学习</view>
				<view class="types" v-if="item.comments_count>=1">已学习</view>
			</view>
			<view class="timu">
				{{item.cintents}}
			</view>
			<view class="time">
				{{item.update_time}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		gettestlist
	} from "../../api/api/index"
	export default {
		data() {
			return {
				navarr: [{
					name: "全部",
					type: 0
				}, {
					name: "未学习",
					type: 1
				}, {
					name: "已学习",
					type: 2
				}],
				type: 0,
				arr: [],
			}
		},
		methods: {
			navbtn(item, index) {
				this.type = item.type
				this.publik()
			},
			publik() {
				gettestlist({
					type: this.type
				}).then(res => {
					this.arr = res.data
				})
			},
			examination(v){
				this.jumpLink({link:"/pages/ExaminationQuestionspage/index",query:{id:v.id}})
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.publik()
		}
	}
</script>

<style scoped lang="less">
	.topnav {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.nav {
			width: 30%;
			text-align: center;
		}

		text {
			height: 80rpx;
			line-height: 80rpx;
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #676767;
		}

		.specil {
			font-family: MicrosoftYaHei;
			font-size: 30rpx;
			color: #676767;
			font-weight: 700;
			border-bottom: #dd1919 1rpx solid;
		}
	}

	.contant {
		padding: 30rpx;
		box-sizing: border-box;

		.titlebox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.titles {
				font-family: MicrosoftYaHei-Bold;
				font-size: 28rpx;
				color: #333333;
				font-weight: 700;
			}

			.type {
				width: 91rpx;
				height: 35rpx;
				background-color: #ffba00;
				border-radius: 18rpx;
				font-family: MicrosoftYaHei;
				font-size: 20rpx;
				line-height: 34rpx;
				color: #000000;
				text-align: center;
				font-weight: normal;
			}
			.types{
				width: 91rpx;
				height: 35rpx;
				background-color: #e3e3e3;
				border-radius: 18rpx;
				font-family: MicrosoftYaHei;
				font-size: 20rpx;
				line-height: 34rpx;
				color: #9b9b9b;
				text-align: center;
				font-weight: normal;
			}
		}

		.timu {
			font-family: MicrosoftYaHei;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 0rpx;
			line-height: 40rpx;
			color: #666666;
			margin-bottom: 10rpx;
		}

		.time {
			font-family: MicrosoftYaHei;
			font-size: 20rpx;
			line-height: 34rpx;
			color: #9c9c9c;
		}
	}
</style>
